<template>
  <el-row align="middle">
    <el-col :span="8">
      <company-selector width="w-100" v-model="selectCompanyId"/>
    </el-col>
    <el-col :span="2">
      <span>{{ cars?.length }} 辆</span>
    </el-col>
    <el-col :offset="12" :span="2">
      <el-button v-if="checkPermission(Permissions.car, Action.add)" type="primary" @click="showAddDialog=true">添加车辆
      </el-button>
    </el-col>
  </el-row>
  <el-divider/>
  <el-table :data="cars" v-loading="isLoading" stripe border>
    <el-table-column label="车牌号" prop="company_car_name"></el-table-column>
    <el-table-column label="保养时间" prop="company_car_bytime"></el-table-column>
    <el-table-column label="车辆行驶证" prop="company_car_xsz">
      <template #default="scope">
        <photo-provider v-if="scope.row.company_car_xsz != null">
          <photo-consumer :key="getImageUrl(scope.row.company_car_xsz)"
                          :src="getImageUrl(scope.row.company_car_xsz)">
            <img :src="getImageUrl(scope.row.company_car_xsz)"
                 class="size-20"
                 alt="车辆行驶证"/>
          </photo-consumer>
        </photo-provider>
      </template>
    </el-table-column>
    <el-table-column label="车辆外观图" prop="company_car_img">
      <template #default="scope">
        <photo-provider v-if="scope.row.company_car_img != null">
          <photo-consumer :key="getImageUrl(scope.row.company_car_img)"
                          :src="getImageUrl(scope.row.company_car_img)">
            <img :src="getImageUrl(scope.row.company_car_img)"
                 class="size-20"
                 alt="车辆外观图"/>
          </photo-consumer>
        </photo-provider>
      </template>
    </el-table-column>
    <el-table-column label="交强险到期时间" prop="company_car_cbtime">
      <template #default="{row}">
        <span :class="{'text-red':checkDateExpire(row.company_car_cbtime)}">{{ row.company_car_cbtime }}</span>
      </template>
    </el-table-column>
    <el-table-column label="商业险到期时间" prop="company_car_sytime">
      <template #default="{row}">
        <span :class="{'text-red':checkDateExpire(row.company_car_sytime)}">{{ row.company_car_sytime }}</span>
      </template>
    </el-table-column>
    <el-table-column label="停车费到期时间" prop="company_car_tctime">
      <template #default="{row}">
        <span :class="{'text-red':checkDateExpire(row.company_car_tctime, 5)}">{{ row.company_car_tctime }}</span>
      </template>
    </el-table-column>
    <el-table-column label="年审时间" prop="company_car_nstime">
      <template #default="{row}">
        <span :class="{'text-red':checkDateExpire(row.company_car_nstime)}">{{ row.company_car_nstime }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-popconfirm v-if="checkPermission(Permissions.car, Action.delete)"
                       :title="'确认删除 ' + scope.row.company_car_name + '吗？'"
                       @confirm="deleteCarFn(scope.row.company_car_id)">
          <template #reference>
            <el-button type="danger"
                       size="small"
                       :disabled="!mutation.isLoading && needDeleteCarId !== scope.row.company_car_id"
                       :loading="mutation.isLoading && needDeleteCarId === scope.row.company_car_id">删除
            </el-button>
          </template>
        </el-popconfirm>
        <el-button v-if="checkPermission(Permissions.car, Action.edit)" size="small" type="success"
                   @click="updateCar(scope.row)"
                   :loading="needUpdateCar?.company_car_id === scope.row.company_car_id">修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <add-car-dialog v-model="showAddDialog" @success="refetch()"/>
  <update-car-dialog v-model="showUpdateDialog" v-model:car="needUpdateCar" @success="refetch()"/>
</template>

<script setup lang="ts">
import CompanySelector from "../../components/CompanySelector.vue";
import {useQuery} from "@pinia/colada";
import {type Ref, ref, watchEffect} from "vue";
import {getCars} from "../../api/car.ts";
import AddCarDialog from "./components/AddCarDialog.vue";
import {useDeleteCar} from "../../mutations/cars.ts";
import {PhotoConsumer, PhotoProvider} from "vue3-photo-preview";
import {checkDateExpire, getImageUrl} from "../../utils/utils.ts";
import UpdateCarDialog from "./components/UpdateCarDialog.vue";
import type {Car, CarVO} from "../../types";
import {useCloned} from "@vueuse/core";
import {useUserStore} from "../../store/userStore.ts";
import {Action, Permissions} from "../../types/permissions.ts";

const selectCompanyId = ref();
const showAddDialog = ref(false)
const showUpdateDialog = ref(false)
const needUpdateCar = ref<CarVO>()

let {checkPermission} = useUserStore();

let {data: cars, isLoading, refetch} = useQuery({
  key: () => ['car', selectCompanyId.value ?? null],
  query: () => getCars(selectCompanyId),
  enabled: () => selectCompanyId.value !== undefined
});

let {deleteCarFn, mutation, needDeleteCarId} = useDeleteCar();

const updateCar = (car: Ref<Car>) => {
  let {cloned} = useCloned(car);
  needUpdateCar.value = cloned.value;
  showUpdateDialog.value = true;
}


watchEffect(() => {
  console.log(mutation.status.value);
  mutation.status.value === 'success' && refetch()
  if (mutation.status.value === 'error') {
    needDeleteCarId.value = undefined
  }
})
</script>
<style scoped>

</style>